<template>
	<view class="layout">
		<wd-navbar title="出库信息" left-text="返回" @click-left="uni.navigateBack" left-arrow />
		<wd-toast />
		
		<!-- 出库信息列表 -->
		<scroll-view 
			class="scroll-container"
			scroll-y
			@scrolltolower="loadMore"
			v-if="dataList.length > 0"
		>
			<view class="list-container">
				<wd-card 
					v-for="(item, index) in dataList" 
					:key="item.id"
					class="info-card"
				>
					<view class="card-header">
						<text class="card-title">出库记录 {{ index + 1 }}</text>
					</view>
					<wd-cell-group border>
						<wd-cell title="仓库名称" :value="item.warehouseName || '-'" />
						<wd-cell title="产品型号" :value="item.model || '-'" />
						<wd-cell title="规格" :value="item.specification || '-'" />
						<wd-cell title="数量" :value="String(item.quantity || '-')" />
						<wd-cell title="说明" :value="item.remarks || '-'" />
						<wd-cell title="出库时间" :value="formatTime(item.outboundTime)" />
					</wd-cell-group>
				</wd-card>
			</view>
			
			<!-- 加载更多提示 -->
			<view class="load-more" v-if="hasMore">
				<text class="load-text" v-if="loading">加载中...</text>
				<text class="load-text" v-else>上拉加载更多</text>
			</view>
			<view class="load-more" v-else-if="dataList.length > 0">
				<text class="load-text">没有更多数据了</text>
			</view>
		</scroll-view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<text class="empty-text">暂无出库信息</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { ProcessService } from '@/services';
	import { useToast } from '@/uni_modules/wot-design-uni';
	import dayjs from 'dayjs';
	
	const toast = useToast();
	
	// 数据列表
	const dataList = ref([]);
	
	// 分页状态
	const hasMore = ref(true);
	const loading = ref(false);
	
	// 查询参数
	const queryParams = ref({
		pageNum: 1,
		pageSize: 20,
		smallRollId: ''
	});
	
	// 格式化时间
	const formatTime = (time) => {
		if (!time) return '-';
		return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
	};
	
	// 加载出库信息
	const loadData = async (isRefresh = true) => {
		if (loading.value) return;
		
		try {
			loading.value = true;
			
			if (isRefresh) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
			}
			
			const response = await ProcessService.getOutboundList(queryParams.value);
			
			if (isRefresh) {
				uni.hideLoading();
			}
			loading.value = false;
			
			if (response && response.code === 200) {
				const data = response.rows || response.data || [];
				
				if (isRefresh) {
					// 刷新：重置数据并排序
					const sortedData = data.sort((a, b) => {
						const timeA = new Date(a.outboundTime || a.createTime || 0).getTime();
						const timeB = new Date(b.outboundTime || b.createTime || 0).getTime();
						return timeB - timeA; // 降序：新的在前
					});
					dataList.value = sortedData;
				} else {
					// 加载更多：追加数据，去重处理
					const existingIds = new Set(dataList.value.map(item => item.id));
					const newData = data.filter(item => !existingIds.has(item.id));
					
					if (newData.length > 0) {
						// 对新数据排序
						const sortedNewData = newData.sort((a, b) => {
							const timeA = new Date(a.outboundTime || a.createTime || 0).getTime();
							const timeB = new Date(b.outboundTime || b.createTime || 0).getTime();
							return timeB - timeA; // 降序：新的在前
						});
						dataList.value = [...dataList.value, ...sortedNewData];
					}
				}
				
				// 判断是否还有更多数据
				if (isRefresh) {
					hasMore.value = data.length >= queryParams.value.pageSize;
				} else {
					// 加载更多时，如果返回的数据少于pageSize，说明没有更多了
					hasMore.value = data.length >= queryParams.value.pageSize;
					
					// 如果没有新数据被添加，也说明没有更多了
					const existingIds = new Set(dataList.value.map(item => item.id));
					const hasNewData = data.some(item => !existingIds.has(item.id));
					if (!hasNewData) {
						hasMore.value = false;
					}
				}
				
				if (dataList.value.length === 0 && isRefresh) {
					toast.info('暂无出库信息');
				}
			} else {
				toast.error(response?.msg || '加载失败');
				if (isRefresh) {
					dataList.value = [];
				}
				hasMore.value = false;
			}
		} catch (error) {
			if (isRefresh) {
				uni.hideLoading();
			}
			loading.value = false;
			toast.error('加载失败，请检查网络');
			console.error('加载出库信息失败:', error);
			if (isRefresh) {
				dataList.value = [];
			}
			hasMore.value = false;
		}
	};
	
	// 加载更多
	const loadMore = () => {
		if (!hasMore.value || loading.value) return;
		
		queryParams.value.pageNum++;
		loadData(false);
	};
	
	// 接收页面传递的参数
	onLoad((options) => {
		if (options && options.smallRollId) {
			queryParams.value.smallRollId = options.smallRollId;
		}
		
		loadData();
	});
</script>

<style scoped>
	.layout {
		padding: 16rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}
	
	.scroll-container {
		flex: 1;
		height: calc(100vh - 120rpx);
	}
	
	.list-container {
		margin-top: 20rpx;
	}
	
	.load-more {
		padding: 40rpx 0;
		text-align: center;
	}
	
	.load-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.info-card {
		margin-bottom: 20rpx;
	}
	
	.card-header {
		padding: 20rpx;
		background-color: #f8f8f8;
		border-bottom: 1px solid #eee;
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
</style>
